<template>
	<view>
		<view  class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end "
				style=" background-color: #eee;">
					<view class="gui-footer-icon-buttons" @tap="navChang(0)">
						<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" style="width: auto;"
						:class="[navCurrent == 0 ? 'gui-color-orange' : 'gui-color-gray']">&#xe63b;</text>
						<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" style="width: auto;"
						:class="[navCurrent == 0 ? 'gui-color-orange' : 'gui-color-gray']">首页</text>
					</view>
					<view class="gui-footer-icon-buttons" @tap="navChang(1)">
						<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons" style="width: auto;"
						:class="[navCurrent == 1 ? 'gui-color-orange' : 'gui-color-gray']">&#xe66e;</text>
						<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" style="width: auto;"
						:class="[navCurrent == 1 ? 'gui-color-orange' : 'gui-color-gray']">个人</text>
					</view>
					<!-- 使用定位方式实现凸出按钮 -->
					<view class="gui-footer-buttons-ab" @tap="navChang(2)">
						<text class="gui-footer-buttons-ab-icon gui-block-text gui-icons gui-bold red iconfont " style=""
						:class="[navCurrent == 2 ? 'gui-color-white' : 'gui-color-white']">
							&#xe65e;
						</text>
						<!-- <text class="iconfont icon-erweima"></text> -->
						<text class="gui-footer-icon-buttons-text gui-block-text gui-nav-bottom-color" style="width: auto;margin-top: 6rpx;"
						:class="[navCurrent == 2 ? 'gui-color-orange' : 'gui-color-gray']">出示码</text>
					</view>
				</view>
	</view>
</template>

<script>
	export default {
		name:"customTabbar",
		data() {
			return {
			};
		},
		props:{
			navCurrent:{
				type:Number,
				default:0
			}
		},
		methods:{
			navChang : function (index) {
				let currentPages =  getCurrentPages(); 
				if(index === 0){
					uni.switchTab({
						url:'/pages/tabBar/index/index'
					})
				}else if(index === 2 && currentPages[currentPages.length - 1].$page.fullPath !== '/pages/tabBar/code/code'){

					uni.navigateTo({
						url:'/pages/tabBar/code/code'
					})
				}else if(index === 1){
					uni.switchTab({
						url:'/pages/tabBar/mine/mine'
					})
				}	
			}
		}
	}
</script>

<style scoped>
@font-face {
  font-family: "iconfont"; /* Project id 3251617 */
  src: url('//at.alicdn.com/t/font_3251617_7b3m47nmazf.woff2?t=1647512103600') format('woff2'),
       url('//at.alicdn.com/t/font_3251617_7b3m47nmazf.woff?t=1647512103600') format('woff'),
       url('//at.alicdn.com/t/font_3251617_7b3m47nmazf.ttf?t=1647512103600') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-icon-test:before {
  content: "\e65e";
}

.icon-erweima1-mianxing:before {
  content: "\e6a7";
}

.icon-erweima:before {
  content: "\e65b";
}



.gui-footer-icon-buttons{
	background-color: #FFFFFF;
}
.red{color: #fff;
    font-size: 55rpx !important;
    /* text-align: center; */
    /* height: 100rpx; */
    /* width: 100rpx; */
    line-height: 107rpx;
    margin-top: -18rpx;
}
.gui-footer-icon-buttons{width:130rpx; height:130rpx; padding:10rpx; flex:1; position:relative; margin:0; background-color:#F8F8F8;}
.gui-footer-buttons-ab{position:absolute; z-index:101; left:325rpx; top:-40rpx !important; width:110rpx; height:110rpx;}
.gui-footer-buttons-ab-icon{width:110rpx; height:110rpx;  text-align:center; font-size:68rpx; background-color:rgb(251,79,2)!important; border-radius:100rpx}
.gui-footer-icon-buttons-text{
	font-size: 28rpx;
}
.gui-footer-buttons-ab{
	top: -50rpx;
}
</style>
